﻿@using Viettel.VOFFICE.Resources
@using Viettel.VOFFICE.Web.Models
@using Viettel.VOFFICE.util
<style type="text/css">
    #div-quick-new
    {
        float: left;
        border-top: solid 1px #eee;
        width: 100%;
        margin-top: 10px;
    }
    #div-quick-new span
    {
        float: left;
        margin-right: 10px;
        margin-top: 10px;
    }
    #list-office-partner
    {
        float: left;
        width: 100%;
        line-height: 21px;
    }
    #list-office-partner li
    {
        width: 50%;
        float: left;
        display: inline;
        cursor: pointer;
    }
    #list-office-partner li:hover {
        text-decoration: underline !important;
    }
</style>
@{
    var officePartners = ViewBag.OfficePartners as List<KeyValueModel>;
    var allowMulti = (bool)ViewBag.AllowMulti;
    if (null != officePartners && officePartners.Any())
    {
    <ul id="list-office-partner">
        @foreach (var office in officePartners)
        {
            <li data-id = "@office.Key" class="select-office-partner">
                @if (allowMulti)
                {
                    <input type="checkbox" class="select-multi" data-id = "@office.Key" />
                }
                <span>
                    @office.Value
                </span></li>
        }
    </ul>
    }
}
<div class="clear">
</div>
@if (allowMulti)
{
    <center style="margin-top: 10px;">
        <input type="button" value="@Resources.SelectOfficePartnerChoose" id="choose-selected-office-partner" style="
                                                                                                     color: #ffffff;
                                                                                                     background-color: #0064cd;
                                                                                                     background-repeat: repeat-x;
                                                                                                     background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
                                                                                                     background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
                                                                                                     background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
                                                                                                     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
                                                                                                     background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
                                                                                                     background-image: -o-linear-gradient(top, #049cdb, #0064cd);
                                                                                                     background-image: linear-gradient(top, #049cdb, #0064cd);
                                                                                                     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
                                                                                                     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
                                                                                                     border-color: #0064cd #0064cd #003f81;
                                                                                                     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
                                                                                                 "/>
    </center>
}
<div id="div-quick-new">
    <span style="padding-top: 15px;">
        @Resources.SelectOfficePartnerQuickPostTitle
    </span><span>
        <textarea id="quick-create-value" style="width: 260px;" />
    </span><span>
        <input type="button" id="quick-create" value="@Resources.SelectOfficePartnerQuickPost" style="margin-top: 10px;" />
    </span>
</div>
<input type="hidden" id="allowMulti" value="@allowMulti.ToString().ToUpper()"/>
<script type="text/javascript">
    var allowMulti = $('#allowMulti').val() == "TRUE";
    window.SelectedOfficePartner = [];
    $(document).ready(function () {
        var $quickCreate = $('#quick-create');
        var $choose = $('#choose-selected-office-partner');
        $quickCreate.button();

        if (!!$choose) {
            $choose.button().addClass('ui-button-primary');
            $choose.bind('click', function (event) {
                $('body').trigger('closeSOP');
            });
        }

        if (!allowMulti) {
            var $selectOfficePartner = $('.select-office-partner');
            $selectOfficePartner.unbind('click');
            $selectOfficePartner.bind('click', function (event) {
                var $target = $(event.currentTarget);
                console.log($target);
                if (!!$target) {
                    var key = $target.attr('data-id');
                    var value = jQuery.trim($target.find('span').first().text());
                    window.SelectedOfficePartner.push({ Key: key, Value: value });
                    $('body').trigger('closeSOP');
                }
            });
        } else {
            var $checkBoxSelect = $('.select-multi');
            $checkBoxSelect.die('click');
            $checkBoxSelect.live('click', function (event) {
                var $target = $(event.currentTarget);
                if (!!$target) {
                    var key = $target.attr('data-id');
                    var value = jQuery.trim($target.parent().find('span').first().text());
                    var obj = { Key: key, Value: value };
                    if ($target.is(':checked') == true) {
                        window.SelectedOfficePartner.push(obj);
                    } else {
                        for (var i = 0; i < window.SelectedOfficePartner.length; i++) {
                            if (window.SelectedOfficePartner[i].Key == key) {
                                window.SelectedOfficePartner.splice(i, obj);
                            }
                        }
                    }
                }
            });
        }

        $quickCreate.unbind('click');
        $quickCreate.bind('click', function (event) {
            var $quickCreateValue = $('#quick-create-value');
            if (!$quickCreateValue.val()) {
                $quickCreate.focus();
                return;
            }
            SaveIndicator.indicate($.post('/officepartner/quick_create', {
                'name': $quickCreateValue.val(),
                'nocache': (new Date()).toJSON()
            }, function (data) {
                if (!!data && data.Status == true) {
                    var key = data.Result;
                    var value = jQuery.trim($quickCreateValue.val());
                    window.SelectedOfficePartner.push({ Key: key, Value: value });
                    if (allowMulti) {
                        $('#list-office-partner').append([
                            '<li data-id = "' + key + '" class="select-office-partner">',
                                '<input type="checkbox" class="select-multi" data-id = "' + key + '" checked="checked" />',
                                '<span>',
                                    value,
                                '</span>',
                            '</li>'
                        ].join(''));
                    } else {
                        $('body').trigger('closeSOP');
                    }

                }
                $quickCreateValue.val('');
            }));
        });
    });
</script>
